<template>
    <div class="footer">
        <router-link to="/" class="footer-item">
            <div class="item-img"><img src="@/assets/index/home.png" alt=""></div>
        </router-link>
        <router-link to="/" class="footer-item">
            <div class="item-img"><img src="@/assets/index/money.png" alt=""></div>
        </router-link>
        <a href="http://www2.53kf.com/webCompany.php?arg=10133101&style=2&kflist=off&kf=19680502&zdkf_type=3&language=cn&charset=GBK" class="footer-item mid">
            <div class="mid-bg"></div>
            <div class="item-img mid-img"><img src="@/assets/index/ask.png" alt=""></div>
        </a>
        <a  class="footer-item" href="tel:400-0188-608">
            <div class="item-img"><img src="@/assets/index/phone.png" alt=""></div>
        </a>
        <a href="http://www2.53kf.com/webCompany.php?arg=10133101&style=2&kflist=off&kf=19680502&zdkf_type=3&language=cn&charset=GBK" class="footer-item">
            <div class="item-img"><img src="@/assets/index/yuyue.png" alt=""></div>
        </a>
       
       
       
    </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'

export default {
    name: 'brand',
    data () {
        return {
            username:"",
            phone:"",
            message:'嘉宝官网移动端首页报名',
            description:'嘉宝官网移动端首页报名',
            local:'嘉宝官网移动端首页报名',
           
            litter:[],
            categoryName:'橱柜'
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    mounted(){
        
    },
    methods:{
       

    },
}
</script>


<style lang="stylus" scoped>
// 1rem = html font-size = 50px

@import "~@styles/varibles.styl";
@import "~@styles/mixins.styl";
img 
    width 100%
.footer 
    height 1.2rem
    background #00a6ba
    width 100%
    z-index: 50;
    position: fixed;
    bottom: 0;
    left: 0;
    display: -webkit-flex;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
.footer-item
    font-size: 0.2rem;
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
    color: #666;
    // background red
.item-img 
    width 0.59rem
    margin 0 auto
.mid 
    position relative
.mid-bg 
    position absolute
    z-index -1
    top -0.4rem 
    left 0
    width 100%
    height 100%
    background #00a6ba
    border-radius 120%
.mid-img 
    margin-top -0.2rem
    width 0.64rem
</style>
